<template>
	<div class="fx-list-cell-select" @click="onCellClick">
		<div v-show="!isEdit" class="fx-ellipsis fx-cursor"><slot>{{cellTextComputed}}</slot></div>
		<w-validate ref="validate">
			<w-select
				v-show="isEdit"
				ref="cell-select"
				v-model="currentInputValue"
				:optionlist="selectOptionList"
				:optionProp="selectOtionProp"
				:disabled="disabled"
				:multiple='multiple'
				:collapseTags='collapseTags'
				:popper-append-to-body="false"
				class="cell-select-input"
				@blur="onBlur"
				@change="onSelectChange"
				@on-select-enter="onSelectEnter"
			>
				<template slot-scope="{ optionlist, optionProp }">
					<el-option
						v-for="item in optionlist"
						:key="item[optionProp.key]"
						:label="item[optionProp.label]"
						:value="item[optionProp.value]"
						:disabled="item[optionProp.disabled]"
						class="cell-select__option fx-ellipsis"
					>
						<span class="cell-select__option-left fx-ellipsis">{{$fxUtils.isDef(item[optionProp.label])?item[optionProp.label]:item.label}}</span>
					</el-option>
				</template>
			</w-select>
		</w-validate>
	</div>
</template>
<script>
import cellMixin from '../mixins/fxListCell.js'
export default {
	name: 'fx-list-cell-select',
	mixins: [cellMixin],
	props: {
		isEdit: Boolean,
		cellText: null,
		value: null,
		stop: Boolean,
		selectOptionList: {
			type: Array,
			default: () => {
				return []
			}
		},
		selectOtionProp: {
			type: Object,
			default: () => {
				return {
					key: 'id',
					label: 'name',
					value: 'id',
					disabled: 'disabled'
				}
			}
		},
		disabled: Boolean,
		multiple: {
			type: Boolean,
			default: false
		},
		collapseTags: {
			type: Boolean,
			default: false
		}
	},
	data () {
		return {
			currentInputValue: ''
		}
	},
	computed: {
		cellTextComputed () {
			if (!this.$fxUtils.isDef(this.cellText)) {
				const selectItem = this.selectOptionList.find(item => {
					return `${this.value}` === `${item.id}`
				}) || {}
				return this.$fxUtils.isDef(selectItem[this.selectOtionProp.label]) ? selectItem[this.selectOtionProp.label] : selectItem.label
			}
			return this.cellText
		}
	},
	created () {
		this.initValidate({
			showValidate: this.showValidate,
			clearValidate: this.clearValidate,
			setFocus: this.focus
		})
	},
	watch: {
		value: {
			immediate: true,
			handler (val) {
				this.currentInputValue = val
			}
		}
	},
	methods: {
		showValidate (message) {
			this.$refs.validate.show(message)
			this.focus()
		},
		clearValidate () {
			this.$refs.validate.clear()
		},
		focus () {
			this.$refs['cell-select'].focus()
		},
		onBlur () {
			this.$refs.validate.clear()
		},
		onCellClick () {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click', this.row, this.rowIndex)
		},
		onSelectChange (selectId) {
			let item
			if (Array.isArray(selectId)) {
				item = this.selectOptionList.filter(i => {
					return selectId.includes(i.id)
				})
			} else {
				item = this.selectOptionList.find(i => {
					return i.id === selectId
				})
			}
			this.$emit('input', selectId)
			this.$emit('on-change', item, this.row)
		},
		onSelectEnter (event) {
			this.$fxUtils.fxDebounce(200).then(() => {
				if (typeof this.$listeners['on-select-enter'] === 'function') {
					this.$emit('on-select-enter', this.row, this.rowIndex)
				} else {
					this.cellEnter(event)
				}
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.fx-list-cell-select {
	.cell-select-input {
		width: 100%
	}
	.cell-select__option {
		display: flex
		&-left {
			flex: 1
		}
	}
}
</style>

